<template>
	<view class="pracBank" @click="startBank(bankItem.id,bankItem.name)">
		<!-- 		<u-image class="coverImg" :src="coverSrc" mode="aspectFill" height="200rpx" width="150rpx">
			<view slot="error" style="font-size: 24rpx;">加载失败</view>
		</u-image> -->
		<view class="bankContent">
			<view class="bankTitle">
				{{bankItem.name}}
			</view>
			<view class="middle">
				<view class="middleItem">共<text>{{bankItem.questionTotal}}</text> 题</view>
				<view class="middleItem">已练<text>{{bankItem.exercisedQuestion}}</text> 题</view>
			</view>

		</view>
		<u-line-progress class="lineProgress" active-color="#007FD1" :percent="Math.round(this.bankItem.storePecent)"
			:striped="true" :striped-active="true"></u-line-progress>
		<!-- 		<view class="bottom">
			<button class="bottomBtn" :ripple="true" @click="checkExam">
				<u-icon class="bottomIcon" name="checkmark" color="#7f878c" size="32"></u-icon>
				<view class="">重置题库</view>
			</button>
			<button class="bottomBtn" :ripple="true" @click="startBank(bankItem.id)">
				<u-icon class="bottomIcon" name="clock" color="#7f878c" size="32"></u-icon>
				<view class="">进入题库</view>
			</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			bankItem: Object,
		},
		data() {
			return {
				coverSrc: "../../static/storeCover.png"
			}
		},
		computed: {
			// 计算完成进度
		},
		methods: {
			startBank(storeId, storeName) {
				this.$store.state.storeInfo.storeName = storeName
				this.$store.state.storeInfo.storeId = storeId
				this.$u.route('pages/exam/pracBankType', {
					// name: this.bankItem.name,
					storeId: storeId,
					isStore: true
				});
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.pracBank {
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		border-radius: 20upx;
		font-size: 28rpx;
		background-color: #FFFFFF;
		padding: 15rpx 25rpx;
		width: 350rpx;
		// width: 100%;
		margin: 10rpx 10rpx;
		display: flex;
		flex-direction: column;

		.coverImg {
			margin-right: 25rpx;
		}

		.bankContent {
			line-height: 55rpx;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: start;

			.bankTitle {
				font-weight: bold;
				color: #0080d1;
				font-size: 31upx;
				// padding-top: 10rpx;
			}

			.middle {
				font-size: 28upx;
				color: #7f878c;
				display: flex;
				// flex-direction: column;
				justify-content: space-between;

				.middleItem {
					margin-right: 20rpx;
				}

				text {
					color: #0080d1;
					font-weight: bold;
				}
			}

			.lineProgress {
				padding: 0;
				margin: 0;
				width: 320rpx;
			}
		}

		.bottom {
			display: flex;
			color: #7f878c;

			.bottomBtn {
				background-color: #FFFFFF;
				color: #000000;
				display: flex;
				font-size: 30rpx;

				.bottomIcon {
					margin: 0rpx 10rpx;
				}
			}
		}
	}
</style>
